<script setup>
// ========================导入区=========================
import { onMounted, reactive, ref } from 'vue';
import { useCommunityList, useAdvStatus, useRoleStatus } from '../../../swy-hook/index2'
import { getAllAdvListApi, delAdvListApi } from '../../../api/adv'
import ImagePreview from '../../../components/ImagePreview'
import addForm from './addForm.vue'
import { ElMessage } from "element-plus";
// ========================注册区=========================
const communityList = useCommunityList()
const advStatus = useAdvStatus()
const roleStatus = useRoleStatus()
// =======================列表功能=====================
const queryData = reactive({
    pageSize: 5,
    current: 1,
    type: null,
    name: '',
    status: null,
    community_code: '',
});
const addRef = ref()
const list = ref([])
const total = ref(0)
const initData = async () => {
    const res = await getAllAdvListApi(queryData)
    console.log(res);
    // res.data.rows = res.data.rows.map((item) => {
    //     item.pic_url = 'http://124.223.14.236:8881' + item.pic_url
    //     return item
    // })
    list.value = res.data.rows
    total.value = res.data.count
}
onMounted(() => {
    initData()
})
// 显示广告位置状态文字
const showAdvState = (val) => {
    let res = advStatus.find((item) => item.value === val * 1);
    // console.log(res);
    return res ? res.label : "未知";
};
// 显示角色状态文
const showRoleState = (val) => {
    let res = roleStatus.find((item) => item.value === val * 1);
    // console.log(res);
    return res ? res.label : "未知";
};
// 每页数量切换
const sizeChange = (val) => {
    queryData.pageSize = val
    initData()
}
// 页码切换
const currentChange = (val) => {
    queryData.current = val
    initData()
}
// 搜索确定
const onSearch = () => {
    queryData.current = 1
    initData()
}
// 搜索取消
const onReset = () => {
    Object.assign(queryData, {
        pageSize: 5,
        current: 1,
        type: '',
        name: '',
        status: '',
        community_code: '',
    })
    initData()
}

// -------------修改功能------------
const editRow = (id) => {
    addRef.value.replyData(id);
};

const delRow = async (id) => {
    await delAdvListApi(id)
    ElMessage.success('删除成功')
    if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--
    initData()
}

</script>
<template>
    <div class="app-container">
        <h3><b>广告管理</b> <span>用于广告图管理相关内容信息</span> </h3>

        <el-card style="margin-bottom: 15px;">
            <!-- 搜索区域 -->
            <el-form label-width="20px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span class="demonstration">小区名称</span>
                            <el-select v-model="queryData.community_code" clearable>
                                <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <span class="demonstration">广告名称</span>
                            <el-input v-model="queryData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <span class="demonstration">广告位置</span>
                            <el-select v-model="queryData.type" clearable>
                                <el-option v-for="(item, index) in advStatus" :key="index" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <span class="demonstration">广告状态</span>
                            <el-select v-model="queryData.status" clearable>
                                <el-option v-for="(item, index) in roleStatus" :key="index" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="block">
                            <el-button type="primary" @click="onSearch">搜索</el-button>
                            <el-button @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card>
            <!-- 工具区域 -->
            <el-row type="flex" justify="space-between">
                <div></div>
                <div>
                    <el-button type="primary" @click="addRef.isShow = true">新增广告</el-button>
                </div>
            </el-row>
            <br>

            <!-- 表格区域 -->
            <el-table :data="list" border style="width: 100%">
                <el-table-column type="index" label="ID" />
                <el-table-column label="小区名称">
                    <template #default="{ row }">
                        {{ row.community?.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="广告名称" />
                <el-table-column prop="pic_url" label="图片内容">
                    <template #default="{ row }">
                        <!-- <img :src="row.pic_url" alt="" style="width: 100px; height: 100px;"> -->
                        <ImagePreview style="width: 100px; height: 100px;" :src="row.pic_url"></ImagePreview>
                    </template>
                </el-table-column>
                <el-table-column prop="link" label="链接地址" />
                <el-table-column prop="type" label="广告位置">
                    <template #default="{ row }">
                        {{ showAdvState(row.type) }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                        {{ showRoleState(row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" size="default" @click="editRow(row.id)">编辑</el-button>
                        <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
                            <template #reference>
                                <el-button type="text" size="default">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>
            <br>
            <!-- 分页区域 -->
            <el-pagination style="float: right;" @size-change="sizeChange" @current-change="currentChange"
                v-model:current-page="queryData.current" v-model:page-size="queryData.pageSize" layout="total, prev, pager, next" :total="total"
                background>
            </el-pagination>
            <br>
            <br>
            <!-- 新增修改组件 -->
            <addForm ref="addRef" @update-list="initData"></addForm>
        </el-card>
    </div>
    <!-- 底部区域 -->
    <el-from label-width="80px" style="text-align: center;">
        <div>Ant Design divro黑马前端合肥前端欢迎您</div>
        <div>© 2023 悦兴物业集团</div>
        <br>
    </el-from>
</template>
<style  scoped>
.demonstration {
    display: block;
    color: #606266;
    font-size: 14px;
}

.block {
    padding-top: 30px;
}
</style>